<template>
    <div>
        <addStaffBtn></addStaffBtn>  <!--新增员工那一行按钮-->
        <div class="paddingTop">
            <el-row>
                <el-col :span="24" style="min-height: 330px">
                    <el-table :header-cell-style="this.$store.state.headerCssObj" :cell-style="this.$store.state.cellCssObj" :data="currentData" border style="width: 100%">
                        <el-table-column prop="number" label="工号" width="80"></el-table-column>
                        <el-table-column prop="name" label="姓名"></el-table-column>
                        <el-table-column prop="password" label="密码"></el-table-column>
                        <el-table-column prop="sex" label="性别" width="60"></el-table-column>
                        <el-table-column prop="idCard" label="身份证号" width="200"></el-table-column>
                        <el-table-column prop="storeName" label="部门"></el-table-column>
                        <el-table-column prop="jobName" label="职位"></el-table-column>
                        <el-table-column prop="tel" label="联系方式" width="150"></el-table-column>
                        <el-table-column prop="baseSalary" label="基本工资" width="90"></el-table-column>
                        <el-table-column label="操作" width="150">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" @click="editStaffInfo(scope.row)">修改</el-button>
                                <el-button type="danger" size="mini"  @click="delStaffInfo(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div class="pages">
                        <paging :obj = 'pagingData'></paging>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--修改员工弹出框-->
        <el-dialog title="修改员工" :visible.sync="dialogFormVisible" width="600px" center :close-on-click-modal = 'false'>
            <el-form :rules='editStaffRules' :model="editStaffData" ref="editStaffData">
                <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="editStaffData.name" autocomplete="off" placeholder="请输入员工姓名" disabled style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                    <el-input v-model="editStaffData.password" autocomplete="off" placeholder="请输入员工密码" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="员工编号" :label-width="formLabelWidth" prop="number">
                    <el-input v-model="editStaffData.number" autocomplete="off" placeholder="请输入员工编号" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                    <el-radio-group v-model="editStaffData.sex" style="width: 75%">
                        <el-radio label="男" :value="1"></el-radio>
                        <el-radio label="女" :value="2"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号" :label-width="formLabelWidth" prop="idCard">
                    <el-input v-model="editStaffData.idCard" autocomplete="off" placeholder="请输入身份证号" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth" prop="tel">
                    <el-input v-model="editStaffData.tel" autocomplete="off" placeholder="请输入联系电话" style="width: 75%"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth" prop="storeName">
                    <el-select v-model="editStaffData.storeName" placeholder="请选择部门" style="width: 75%" @change="chooseStore">
                        <el-option v-for="(item,index) in storeData" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth" prop="jobName">
                    <el-select v-model="editStaffData.jobName" placeholder="请选择职位" style="width: 75%" @change="chooseJob">
                        <el-option v-for="(item,index) in jobData" :key="index" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工资" :label-width="formLabelWidth" prop="baseSalary">
                    <el-input v-model="editStaffData.baseSalary" autocomplete="off" placeholder="请输入员工工资" style="width: 75%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="btnHeight" @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="toEditStaff('editStaffData')">提交</el-button>
            </div>
        </el-dialog>
        <!--删除员工弹出框-->
        <deleteDialog :deleteDialogVisible="myDeleteDialogVisible" @handleFun="myDelStaff" @cancel="myDeleteDialogVisible=false"></deleteDialog>
    </div>
</template>

<script>
    import {mapActions,mapGetters} from 'vuex'
    import addStaffBtn from "../../components/backgroundCom/StaffInfoCom/addStaffBtn";    //新增按钮行
    import deleteDialog from "../../components/publicCom/deleteDialog";    //确认删除弹框

    export default {
        name: "employeeInformationPage",
        components:{
            addStaffBtn,
            deleteDialog,
        },
        data(){
            //验证员工密码
            let YZ_password = (rule, value, callback)=>{
                if (value === '' || value === undefined) {
                    callback(new Error('请输入密码'));
                }
                callback();
            };
            //验证员工编号
            let YZ_number = (rule, value, callback)=>{
                if (value === '' || value === undefined) {
                    callback(new Error('请输入员工编号'));
                }
                callback();
            };
            //验证身份证
            let YZ_IDCard = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入身份证号'));
                } else {
                    /*if (!(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value))) {
                        callback(new Error('身份证号输入错误'));
                    }*/
                    callback();
                }
            };
            //验证联系电话
            let YZ_Tel = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入联系电话'));
                } else {
                    /*if (!(/^1[3456789]\d{9}$/.test(value))) {
                        callback(new Error('联系电话输入错误'));
                    }*/
                    callback();
                }
            };
            //验证工资
            let YZ_base_salary = (rule, value, callback) => {
                if (value === '' || value === undefined) {
                    callback(new Error('请输入员工工资'));
                } else {
                    if (!(/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value))) {
                        callback(new Error('工资输入错误'));
                    }
                    callback();
                }
            };
            return{
                //-----------------分页部分-----------------
                pageData:[],
                currentPage:1,
                //-----------------编辑员工部分-----------------
                dialogFormVisible:false,   //编辑员工弹窗的显示状态
                editStaffRules:{    //编辑员工表单验证规则
                    password:[{validator:YZ_password,trigger:'blur'}],  //验证密码
                    number:[{validator:YZ_number,trigger:'blur'}],  //验证员工编号
                    idCard:[{validator:YZ_IDCard,trigger:'blur'}],  //验证员工身份证号
                    tel:[{validator:YZ_Tel,trigger:'blur'}],  //验证员工联系电话
                    baseSalary:[{validator:YZ_base_salary,trigger:'blur'}],  //验证员工工资
                },
                editStaffData:{},    //编辑员工的信息
                formLabelWidth:'25%',   //编辑员工弹窗label的宽度
                //-----------------删除员工部分-----------------
                myDeleteDialogVisible:false,     //删除弹出框状态
                delOne:{name:''}
            }
        },
        computed:{
            //表格数据
            currentData(){
                let thisData=this.$store.state.staffInformationStore.foundStaffData.staffList;   //存的数据
                let thisPageSize=this.$store.state.staffInformationStore.pages.pageSize;  //存的页容量
                let thisPageNum=this.$store.state.staffInformationStore.pages.currentPage;  //存的页码
                thisData.length>thisPageSize ?
                    this.pageData=thisData.slice((thisPageNum-1)*thisPageSize,thisPageNum*thisPageSize) :
                    this.pageData=thisData;
                return this.pageData
            },
            //分页数据
            pagingData(){
                var that = this;
                let data = {
                    pageSize:5,//一页展示几条数据
                    pagerCount:5,//超过多少页打点省略
                    currentChange(num){
                        that.changeCurrentPage({currentPage:num});  //保存页数
                        that.currentPage = that.$store.state.staffInformationStore.pages.currentPage; //改变当前页
                        that.tableStaffInfo();  //改变页面表格数据
                    },
                    pageCount:that.$store.state.staffInformationStore.foundStaffData.totalPage,//一共多少页
                };
                return data
            },
            //部门信息
            storeData(){
                return this.$store.state.staffInformationStore.foundAllStore;
            },
            //职位信息
            jobData(){
                return this.$store.state.staffInformationStore.foundAllJob;
            },
        },
        methods:{
            ...mapActions(['userOperation','toDelStaff','editThisStaff','showStaffInfo','selectStore','selectJob','changeCurrentPage','selectStaffByObj']),

            //===================================用户操作日志===================================
            staffOperation(str){
                let operation = {//用户操作
                    userName:this.$store.state.user.userName,//用户名
                    operationDate:this.$store.state.nowTime.time,//用户操作时间
                    operationMessage:str,//用户操作内容
                };
                this.userOperation(operation)//需要在操作完成后，调用处理用户操作的函数
            },
            //===================================获取表格数据===================================
            tableStaffInfo(){
                //如果是显示所有
                if (this.$store.state.staffInformationStore.pageState==='showAll'){
                    this.showStaffInfo({"pageCount":this.$store.state.staffInformationStore.pages.currentPage, "pageSize": 5}).then(res=>{
                        if (res.code!==200){
                            // console.log(res);
                            this.$message({
                                type: 'error',
                                message: '员工信息加载失败'
                            });
                        }
                    });
                    //如果是显示查询
                }else if (this.$store.state.staffInformationStore.pageState==='showSelect'){
                    this.selectStaffByObj(this.$store.state.staffInformationStore.thisSelectObj).then(res=>{
                        // console.log(res);
                    })
                }
            },
            //===================================修改员工===================================
            //点击修改
            editStaffInfo(row){    //修改员工
                // console.log(row);
                this.editStaffData=row;    //将信息传入弹出框
                this.dialogFormVisible=true;    //显示弹出框
            },
            //修改部门
            chooseStore(val){
                this.$forceUpdate();   //强制刷新
                this.$store.state.staffInformationStore.foundAllStore.forEach(item=>{
                    if (item.name===val) this.editStaffData.storeId = item.storeId;
                });
            },
            //修改职位
            chooseJob(val){
                this.$forceUpdate();   //强制刷新
                this.$store.state.staffInformationStore.foundAllJob.forEach(item=>{
                    if (item.name===val) this.editStaffData.jobId = item.jobId;
                });
            },
            //提交修改员工
            toEditStaff(formName){
                // console.log(this.editStaffData);
                this.editStaffData.updateBy=this.$store.state.user.userName;   //更新人
                // this.editStaffData.updateTime=this.$store.state.nowTime.time;   //更新时间
                this.$refs[formName].validate((valid) => {
                    if(valid){     //表单输入全部验证通过
                        this.editThisStaff(this.editStaffData).then(res=>{
                            if (res.code===200){
                                this.$message({
                                    type: 'success',
                                    message: '修改成功！'
                                });
                                this.staffOperation(`修改员工${this.editStaffData.name}`); //修改成功，记录操作日志
                                this.tableStaffInfo();   //刷新表格
                                this.dialogFormVisible=false;    //隐藏弹出框
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '修改失败！'
                                });
                            }
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '请输入正确的员工信息'
                        });
                        return false;
                    }
                });
            },
            //===================================点击删除按钮===================================
            delStaffInfo(row){
                this.myDeleteDialogVisible=true;
                // console.log(this.delOnde);
                this.delOne.name=row.name;
            },
            //确认删除员工
            myDelStaff(){
                //提交删除
                this.toDelStaff({name:this.delOne.name}).then(res=>{
                    if (res.code===200){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.staffOperation(`删除员工${this.delOne.name}`);   //操作日志
                        if(this.$store.state.staffInformationStore.foundStaffData.staffList.length<=1&&this.$store.state.staffInformationStore.pages.currentPage>1){
                            this.$store.state.staffInformationStore.pages.currentPage--;
                            this.currentPage=this.$store.state.staffInformationStore.pages.currentPage;
                        }
                        this.tableStaffInfo();   //刷新表格
                        this.myDeleteDialogVisible=false;
                    }else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        });
                    }
                });
            },
        },
        created() {
            this.selectStore();   //获取所有部门
            this.selectJob();   //获取所有职位
            //获取当前页员工信息，渲染表格
            this.showStaffInfo({"pageCount":1, "pageSize": 5}).then(res=>{
                if (res.code!==200){
                    this.$message({
                        type: 'error',
                        message: '员工信息加载失败'
                    });
                }
            });
        }
    }
</script>

<style scoped lang="less">
    .paddingTop{
        padding-top: 20px;
        .el-row{
            .el-col{
                text-align: center;
                .el-input,.diySelect{
                    margin-left: 10px;
                    width: 80%;
                }
                .pages{
                    margin-top: 20px;
                    text-align: center;
                }
            }
            .el-table{
                margin: auto;
            }
        }
        .el-dialog{
            #message{
                display: inline-block;
                text-align: center;
                width: 100%;
            }
            .dialog-footer{
                width: 100%;
            }
            div{
                text-align: center;
                margin: 5px auto;
                span{
                    display: inline-block;
                    text-align: center;
                    width: 20%;
                }
                .el-input{
                    display: inline-block;
                    text-align: center;
                    width: 60%;
                }
            }
        }
    }
</style>